<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="10" :offset="0">
        <el-row type="flex" style="padding: 20px">
          <el-button @click="addArticle" style="padding:10px" type="primary" icon="el-icon-plus">添加文章</el-button>
           <a style="font-size: 12px;padding:10px">按时间排序：</a>
          <el-tooltip content="顺序" placement="top" effect="light">
          <i class="el-icon-sort-down" @click="sortArticle('asc')" style="position:relative;left:5px;top:10px"/>
          </el-tooltip>
          <el-tooltip content="逆序" placement="top" effect="light">
          <i class="el-icon-sort-up" @click="sortArticle('desc')" style="position:relative;top:10px"/>
          </el-tooltip>

        </el-row>
      </el-col>
      <el-col :span="10" :offset="4">
        <el-row>
          <el-input
              placeholder="请输入文章名称"
              v-model="input"
              style="width: 250px;padding: 20px;"
              clearable>
          </el-input>
          <el-button @click="getArticle(input)" type="primary" icon="el-icon-search">搜索</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-table
        :data="articleList"
        border
        stripe
        height="480"
        style="width: 100%;">
      <el-table-column
          prop="id"
          label="标号"
          width="50">

      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          width="280">
      </el-table-column>
      <el-table-column
          prop="author"
          label="出版社"
          width="160">

      </el-table-column>
      <el-table-column
          prop="likeNum"
          width="110"
          label="喜欢"
      >

      </el-table-column>
      <el-table-column
          prop="dislikeNum"
          width="110"
          label="不喜欢">
      </el-table-column>
      <el-table-column
          prop="createTime"
          width="250"
          label="发表时间">
      </el-table-column>
      <el-table-column
          width="152"
          label="操作">
        <template slot-scope="scope">
          <el-row>

            <i class="el-icon-edit" @click="choose(scope.row)"
               style="padding: 20px"></i>
            <i class="el-icon-delete" @click="delArticle(scope.row)"
               style="padding: 20px"></i>
          </el-row>
        </template>
      </el-table-column>

    </el-table>


  </div>

</template>

<script>
import {
  deleteArticle,
  updateArticle,
  getAllArticles,
  getArticleByTime,
  addArticle,
  editUser,
  deleteUser, getAllUsers
} from "@/api/api";
import router from '@/router';
export default {

  name: "article",
  data(){
    return{
title:'',
      author:'',
      content:'',
      imageUrl:'',
      articleList:[],
      input:'',
    }
  },
  mounted(){
this.getAll();
  },
  methods:{
    choose(i){
      router.push({path: '/editor2/'+i.id })
    },

getArticle(){},
    sortArticle(i){

      getArticleByTime(i).then((res)=>{
        this.articleList = res.data.data;

      }).catch((res) => {
        alert(res.data.message);
      })
    },
    addArticle(){
      router.push("/editor");
    },

    delArticle(i) {
      console.log(i);
      const id = i.id
      deleteArticle(id).then((res) => {
        alert(res.data.message)
        location.reload();
      }).catch((res) => {
        alert(res.data.message);
      })

    },
    getAll() {
      getAllArticles().then((res) => {
        if (res.data.code === '200') {

          console.log(res.data.data);
          this.articleList = res.data.data;
        }else{ console.log(res.data.message)
          console.log(res.data.data);}
      }).catch((res) => {
        console.log(res.data.message)
        console.log(res.data.data);
      })

    },
  }
}
</script>

<style scoped>

</style>